<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心</title>
  <!-- Import style -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <link rel="stylesheet" href="./static/element-plus/theme-chalk/display.css">
  <!-- Import Vue 3 -->
  <script src="./static/js/vue.global.js"></script>
  <!-- Import component library -->
  <script src="./static/element-plus/index.full.js"></script>
  <style>
   .article-item {
      border-bottom: 1px solid #e8e8e8;
      padding: 15px 0;
    }

   .article-title {
      color: #1989fa;
      text-decoration: none;
      display: block;
    }

   .article-date {
      color: #666;
      margin-right: 10px;
    }

   .article-desc {
      color: #999;
      margin-top: 5px;
    }

   .article-item +.article-item {
      border-top: 1px solid #ccc; 
    }
  </style>
</head>

<body>
  <div id="app">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="4" style="display: flex;flex-direction:row;align-items:center">
            <img src="./static/images/logo.png" style="height: 60px;">
            <h2 style="padding-left: 8px;">技术社区</h2>
          </el-col>
          <el-col :span="8">
            <el-menu :default-active="activeIndex" mode="horizontal" style="border-bottom: none  !important"
              :ellipsis="false">
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2">文章</el-menu-item>
              <el-menu-item index="3">课程</el-menu-item>
              <el-menu-item index="4">商城</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="8" style="height: 60px; line-height:60px" class="hidden-xs-only">
            <el-input />
          </el-col>
          <el-col :span="4" style="line-height: 60px;" class="hidden-xs-only">
            <el-link type="primary">登录</el-link>
            <el-link type="primary" style="padding: 8px;">注册</el-link>
          </el-col>

        </el-row>
      </el-header>

      <el-container>
        <el-header>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <el-card>
              <el-menu :default-active="activeIndex" style="border-bottom: none !important" ellipsis="false">
                <el-menu-item index="1">个人主页</el-menu-item>
                <el-menu-item index="2">个人资料</el-menu-item>
                <el-menu-item index="3">账号设置</el-menu-item>
                <el-menu-item index="4">消息设置</el-menu-item>
                <el-menu-item index="5" v-show="user.userType=='admin'">后台管理</el-menu-item>
              </el-menu>
            </el-card>
          </el-aside>
          <el-main>
            <el-card>
              <el-row>
                <el-col :span="6">
                  <img src="./static/images/avatar.png" />
                </el-col>
                <el-col :span="18">
                  <h2>{{user.username}}</h2>
                  <span>性别: {{user.gender}}</span>
                  <span>签名档: {{user.sign}}</span>
                </el-col>
              </el-row>
            </el-card>
            <el-card>
              <el-tabs>
                <el-tab-pane label="我发布的文章">
                  <div v-if="articleList.length > 0">列表数据</div>
                  <el-empty v-else description="暂无数据"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="我收藏的文章">
                  <div v-if="myArticleList.length > 0">
                    <div class="article-item" v-for="article in myArticleList" :key="article.id">
                      <a href="#" class="article-title">{{article.title}}</a>
                      <span class="article-date">{{article.date}}</span> |
                      <span class="article-desc">{{article.desc}}</span>
                    </div>
                  </div>
                  <el-empty v-else description="暂无数据"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="我收藏的课程">
                  <div v-if="courseList.length > 0">列表数据</div>
                  <el-empty v-else description="暂无数据"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="我收藏的商品">
                  <div v-if="productList.length > 0">列表数据</div>
                  <el-empty v-else description="暂无数据"></el-empty>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-main>
        </el-container>

        <el-footer>
          <el-row>
              <el-col :lg="8" :xs="24" style="display: flex;flex-direction:row;align-items:center;">
                  <div><img src="./static/images/logo.png" style="width: 100px;"></div>
                  <div style="padding-left: 8px;">
                      <h2>技术社区</h2>
                      <p>致力于构建一个专业的IT技术交流社区</p>
                  </div>
              </el-col>
              <el-col :lg="8" :xs="24">
                  <div>
                      <el-link type="primary">首页</el-link>
                      <el-link type="primary">文章</el-link>
                      <el-link type="primary">课程</el-link>
                      <el-link type="primary">商城</el-link>
                  </div>
                  <div>
                      <el-link type="primary">关于我们</el-link>
                      <el-link type="primary">使用手册</el-link>
                      <el-link type="primary">隐私条款</el-link>
                      <el-link type="primary">建议反馈</el-link>
                  </div>
              </el-col>
              <el-col :lg="8" :xs="24">
                  <h2>联系我们</h2>
                  <p>电话：1111111</p>
                  <p>邮箱：111@dev.com</p>
              </el-col>
          </el-row>
          <div style="background-color: #a0cfff;text-align:center;height: 60px;line-height: 60px;">软件开发工作室版权所有</div>
      </el-footer>
      </el-container>
  </div>
</body>
<script>
  var App = {
    data() {
      return {
        user: {
          username: "hello vue",
          gender: "男",
          job: "",
          sign: "hello vue",
          userType: 'admin'
        },
        activeIndex: "1",
        myArticleList: [
          {
            id: 1,
            title: "理解JavaScript闭包",
            date: "2023-01-15",
            desc: "深入探讨JavaScript中的闭包及其工作原理。"
          },
          {
            id: 2,
            title: "Vue 3组合式API入门",
            date: "2023-02-20",
            desc: "学习Vue 3中组合式API的基础知识及其有效使用方法。"
          },
          {
            id: 3,
            title: "使用Node.js构建可扩展应用",
            date: "2023-03-10",
            desc: "使用Node.js构建可扩展和可维护应用的最佳实践。"
          },
          {
            id: 4,
            title: "CSS网格布局：综合指南",
            date: "2023-04-05",
            desc: "深入指南，教你如何使用CSS网格布局创建复杂布局。"
          },
          {
            id: 5,
            title: "React Hooks完全指南",
            date: "2023-05-12",
            desc: "全面了解React Hooks及其在函数组件中的应用。"
          }
        ],
        articleList: [],
        courseList: [],
        productList: []
      };
    }
  }
  Vue.createApp(App).use(ElementPlus).mount("#app");
</script>

</html>